import React from 'react';
import { StackViewStyleInterpolator } from 'react-navigation-stack';
import {
  Scene,
  Router,
  Reducer,
  Overlay,
  Modal,
  Stack,
  Lightbox,
} from 'react-native-router-flux';
import Login from './Login/index';
import Welcome from './Welcome/index';
import Main from './Main/index';


// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     backgroundColor: 'transparent',
//     justifyContent: 'center',
//     alignItems: 'center',
//   },
//   tabBarStyle: {
//     height: Px2Dp(112),
//     backgroundColor: '#eee',
//     borderTopWidth: 1,
//     borderTopColor: '#e5e5e5',
//   },
//   tabBarSelectedItemStyle: {
//     backgroundColor: 'red',
//   },
// });

const reducerCreate = (params) => {
  const defaultReducer = new Reducer(params);
  return (state, action) => {
    // console.log('reducer: ACTION:', action);
    return defaultReducer(state, action);
  };
};

const stateHandler = (prevState, newState, action) => {
  // console.log('onStateChange: ACTION:', action);
};

const getSceneStyle = () => ({
  backgroundColor: '#F5FCFF',
  shadowOpacity: 1,
  shadowRadius: 3,
});

// on Android, the URI prefix typically contains a host in addition to scheme
// const prefix = Platform.OS === 'android' ? 'mychat://mychat/' : 'mychat://';

const transitionConfig = () => ({
  screenInterpolator:
  StackViewStyleInterpolator.forFadeFromBottomAndroid,
});

const AppNavigator = () => {
  return (
    <Router
      createReducer={reducerCreate}
      onStateChange={stateHandler}
      getSceneStyle={getSceneStyle}
    >
      <Overlay key="overlay">
        <Modal key="modal" hideNavBar transitionConfig={transitionConfig}>
          <Lightbox key="lightbox">
            <Stack key="root" hideNavBar titleStyle={{ alignSelf: 'center' }}>
              <Scene hideNavBar>
                <Scene key="welcome" component={Welcome} />
                <Scene key="login" component={Login} />
                <Scene key="main" component={Main} initial/>
                {/*<Tabs
                  key="main1"
                  backToInitial
                  onTabOnPress={() => {
                    console.log('Back to initial and also print this');
                  }}
                  showLabel={false}
                  tabBarStyle={styles.tabBarStyle}
                  activeBackgroundColor="white"
                  inactiveBackgroundColor="white">
                  <Scene
                    key="main_home"
                    component={WorkTabList}
                    hideNavBar
                    title="我的工作"
                    icon={TabBarIcon}
                    Image={require('../../images/work.png')}
                    selectedImage={require('../../images/work_focus.png')}
                  />
                  <Scene
                    key="main_local"
                    hideNavBar
                    component={LocalRecordList}
                    title="本地记录"
                    icon={TabBarIcon}
                    Image={require('../../images/upload.png')}
                    selectedImage={require('../../images/upload_focus.png')}
                  />
                  <Scene
                    key="main_message"
                    hideNavBar
                    component={MessageTypeList}
                    title="消息管理"
                    icon={TabBarIcon}
                    Image={require('../../images/message.png')}
                    selectedImage={require('../../images/message_focus.png')}
                  />
                  <Scene
                    key="main_demo"
                    hideNavBar
                    component={Demo}
                    icon={TabBarIcon}
                  />
                </Tabs>
                <Scene key="taskOperation" component={TaskOperation} />
                <Scene key="taskDetail" component={TaskDetail} />
                <Scene key="taskAssign" component={TaskAssign} />
                <Scene key="suggestion" component={Suggestion} />
                <Scene key="setting" component={Setting} />
                <Scene key="about" component={About} />
                <Scene key="inspectExplain" component={InspectExplain} />
                <Scene key="imagePageView" component={ImagePageView} />
                <Scene key="diseaseVerify" component={DiseaseVerify} />
                <Scene key="diseaseDetail" component={DiseaseDetail} />
                <Scene key="addEditDisease" component={AddEditDisease} />
                <Scene key="messageList" component={MessageList} />*/}
              </Scene>
            </Stack>
          </Lightbox>
        </Modal>
      </Overlay>
    </Router>
  );
};

export default AppNavigator;
